<template>
  <div class="item">
    <div class="img">
      <img :src="pic" alt="" width="190px" height="190px" />
    </div>
    <p class="title">{{ title }}</p>
    <p class="price">￥{{ price | money }}</p>
  </div>
</template>

<script>
export default {
  props: ["pic", "title", "price"],
};
</script>

<style scoped>
.item {
  border: 1px solid #dbdbdb;
  box-sizing: border-box;
  padding: 15px;
  height: 309px;
  width: 222px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.title {
  width: 100%;
  text-align: center;
  padding: 0 20px;
  font-size: 18px;
  color: #979797;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.price {
  font-size: 15px;
  color: #404040;
}
.img {
  width: 190px;
  height: 190px;
  overflow: hidden;
}
.img img {
  transition: 0.618s;
}
.img img:hover {
  transform: scale(1.2);
}
</style>
